<template>
  <el-card>
    <pure-table
      adaptive
      :adaptiveConfig="adaptiveConfig"
      :data="tableData"
      :columns="columns"
      :row-class-name="tableRowClassName"
    >
      <template #aqiLevel="{ row }">
        <span :style="{ color: row.aqi.aqiColor }"
          >{{ row.aqi.aqiLevelDes }}({{
            convertLevelToChinese(row.aqi.aqiLevel)
          }})</span
        >
      </template>
    </pure-table>
    <el-pagination
      small
      background
      right
      layout="prev, pager, next"
      :page-count="totalPage"
      :page-size="pageSize"
      class="mt-4"
      @current-change="handlePageChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { getGridProvinceById } from "@/api/gridProvince";
import { getGridCityById } from "@/api/gridCity";
import { getAqiGradeByLevel } from "@/api/aqiGrade";
import { getFeedbackListDetail, getFeedbackTotalPage } from "@/api/feedback";
defineOptions({
  name: "FeedbackHistory"
});

const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  if (rowIndex === 1 || rowIndex === 5) {
    return "pure-warning-row";
  } else if (rowIndex === 3 || rowIndex === 7) {
    return "pure-success-row";
  }
  return "";
};

const columns: TableColumnList = [
  {
    label: "编号",
    prop: "aqiFeedback.fbId",
    width: "80"
  },
  {
    label: "监督员姓名",
    prop: "monitor.monName"
  },
  {
    label: "所在省",
    prop: "provinceName"
  },
  {
    label: "所在市",
    prop: "cityName"
  },
  {
    label: "预估等级",
    prop: "aqi.aqiLevelDes",
    slot: "aqiLevel"
  },
  {
    label: "地址",
    prop: "aqiFeedback.fbAddress"
  },
  {
    label: "反馈日期",
    prop: "fbDate",
    formatter: row => {
      return row.aqiFeedback.fbTime.split("T")[0];
    }
  },
  {
    label: "反馈时间",
    prop: "fbTime",
    formatter: row => {
      return row.aqiFeedback.fbTime.split("T")[1].split(".")[0];
    }
  }
];

const tableData = ref([]);
const totalPage = ref(1);
const pageSize = ref(10);
const pageNum = ref(1);
const router = useRouter();
const aqiFeedbackParam = ref({
  monTel: "18900975656"
});

onMounted(() => {
  console.log("FeedbackHistory mounted");
  getTableData();
  getTableTotalPage();
});

const getTableData = async () => {
  try {
    console.log(aqiFeedbackParam.value, "aqiFeedbackParam");
    const { data } = await getFeedbackListDetail({
      aqiFeedbackParam: aqiFeedbackParam.value,
      pageSize: pageSize.value,
      pageNum: pageNum.value
    });
    const updatedList = await Promise.all(
      data.list.map(async item => ({
        ...item,
        provinceName: await getProvinceById(item.aqiFeedback.provinceId),
        cityName: await getCityById(item.aqiFeedback.cityId),
        aqi: await getAqiByLevel(item.aqiFeedback.fbAqiLevel)
      }))
    );
    tableData.value = updatedList;
    console.log(data.list, "tableData");
    console.log(data.list.length);
  } catch (e) {
    console.log(e);
  }
};

const getTableTotalPage = async () => {
  try {
    const total = await getFeedbackTotalPage({
      aqiFeedbackParam: aqiFeedbackParam.value,
      pageSize: pageSize.value
    });
    totalPage.value = total.data;
    console.log(totalPage.value, "totalPage");
  } catch (e) {
    console.log(e);
  }
};

/**根据省份id获取省份名称 */
const getProvinceById = async (provinceId: number) => {
  try {
    const { data } = await getGridProvinceById(provinceId);
    console.log(data);
    return data.provinceName;
  } catch (e) {
    console.log(e);
  }
};

/**根据城市id获取城市名称 */
const getCityById = async (cityId: number) => {
  try {
    const { data } = await getGridCityById(cityId);
    console.log(data);
    return data.cityName;
  } catch (e) {
    console.log(e);
  }
};

/**根据aqi等级获取aqi信息 */
const getAqiByLevel = async (fbAqiLevel: number) => {
  try {
    const { data } = await getAqiGradeByLevel(fbAqiLevel);
    console.log(data);
    return data;
  } catch (e) {
    console.log(e);
  }
};

//分页
const handlePageChange = (currentPage: number) => {
  pageNum.value = currentPage;
  getTableData();
};

//表格大小自适应
const adaptiveConfig: AdaptiveConfig = {
  /** 表格距离页面底部的偏移量，默认值为 `96` */
  offsetBottom: 85,
  /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
  fixHeader: true
};
// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
    default:
      return "";
  }
};
</script>

<style></style>
